<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="centre/manage/include :: header">
</head>

<link rel="stylesheet" type="text/css" href="/css/plugins/layui/layui.css"/>
<link href="/css/jquery-select/jquery.searchableSelect.css" rel="stylesheet" type="text/css">
<style>

input[type=email], input[type=url], input[type=search], input[type=tel],
	input[type=color], input[type=text], input[type=password], input[type=datetime],
	input[type=datetime-local], input[type=date], input[type=month], input[type=time],
	input[type=week], input[type=number], textarea {
	border-radius: 0 !important;
	color: #858585;
	background-color: #FFF;
	border: 1px solid #D5D5D5;
	padding: 5px 4px 6px;
	font-size: 14px;
	font-family: inherit;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	-webkit-transition-duration: .1s;
	transition-duration: .1s;
}

.table.table-bordered tr th, .table.table-bordered tr td {
	overflow: hidden;
	text-overflow: ellipsis;
}
select {
    padding: 3px 4px;
    height: 30px;
}

</style>
<body class="gray-bg">
	<div class="wrapper wrapper-content">
		<div class="row">
			<div class="col-sm-12">
				<form class="form-horizontal m-t" id="form">
					<div class="form-group">
						<ul class="nav nav-arrow-next nav-tabs" id="myTab">
							<li class="active"><a href="#tab_basic">基本信息</a></li>
							<li><a href="#tab_des">文章内容</a></li>
						</ul>
					</div>
					<div class="tab-content" style="border: 0px;">
						<div class="tab-pane active" id="tab_basic">
							<div class="form-group">
								<label class="col-sm-2 control-label">文章分类:</label>
								<div class="col-sm-6">
									<select data-placeholder="" class="form-control chosen-select" id="type" name="type" tabindex="2">
										<option th:each="item: ${headLine}" th:text="${item.name}" th:value="${item.type}"></option>
									</select>
								</div>
								<label class="col-sm-2 control-label" style="text-align: left"></label>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">标题:</label>
								<div class="col-sm-6">
									<input id="title" name="title" placeholder="标题"
										   class="form-control" type="text" maxlength="150">
								</div>
								<label class="col-sm-2 control-label" style="text-align: left"></label>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">副标题:</label>
								<div class="col-sm-6">
									<input id="subhead" name="subhead" placeholder="标题"
										   class="form-control" type="text" maxlength="250">
								</div>
								<label class="col-sm-2 control-label" style="text-align: left"></label>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">排序(小数靠前,不填默认0):</label>
								<div class="col-sm-6">
									<input id="sort" name="sort"
										   onkeyup="this.value=this.value.replace(/[^0-9-]+.[^0-9-]+/,'');"
										class="form-control" type="text" maxlength="10">
								</div>
								<label class="col-sm-2 control-label" style="text-align: left"></label>
							</div>

							<div class="form-group">
								<label class="col-sm-2 control-label">跳转类型:</label>
								<div class="col-sm-8">
									<label class="radio-inline">
										<input type="radio" name="jumpType" value=""/>无
									</label>
									<label class="radio-inline">
										<input type="radio" name="jumpType" value="H5"/>H5
									</label>
									<label class="radio-inline">
										<input type="radio" name="jumpType" value="product"/>商品
									</label>
									<label class="radio-inline">
										<input type="radio" name="jumpType" value="otherWxxcx"/>小程序
									</label>
									<label class="radio-inline">
										<input type="radio" name="jumpType" value="order"/>点单
									</label>
									<label class="radio-inline">
										<input type="radio" name="jumpType" value="scanCode"/>扫码
									</label>
									<label class="radio-inline">
										<input type="radio" name="jumpType" value="xcxUrl"/>小程序URL
									</label>
									<label class="radio-inline">
										<input type="radio" name="jumpType" value="xcxBottomUrl"/>小程序底部菜单URL
									</label>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-2 control-label">跳转地址:</label>
								<div class="col-sm-6">
									<input id="link" name="link" placeholder="跳转地址"
										class="form-control" type="text">
								</div>
								<label class="col-sm-2 control-label" style="text-align: left"></label>
							</div>

							<div class="form-group">
								<label class="col-sm-2 control-label no-padding-right"> 图片： </label>
								<div class="col-sm-6">
									<div class="input-group ">
										<input type="text" name="imageUrl" id="thumb" value="" class="form-control"
											   autocomplete="off">
										<span class="input-group-btn">
												<button class="btn btn-sm btn-default" type="button"  style="padding:7px 10px"
														onclick="onSelectImgBtnClick('thumb','thumbImg')"
												>选择图片</button>
											</span>
									</div>
									<div class="input-group " style="margin-top:.5em;">
										<img src="" id="thumbImg" style="max-width: 30%"/>
									</div>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-2 control-label no-padding-right"> 状态： </label>
								<div class="col-sm-10" style="padding-top: 5px;">
									<label for="isshow1" class="radio-inline">
										<input type="radio" onclick='radioIsChecked()'
											name="status" value="1" id="isshow1" checked="checked"/> 启用
									</label> &nbsp;&nbsp;&nbsp;
									<label for="isshow2" class="radio-inline">
										<input type="radio" onclick='radioIsChecked()'
										    name="status" value="2" id="isshow2"/> 禁用</label>
								</div>
							</div>
						</div>
						<!-- 文章内容部分 开始 -->
						<div class="tab-pane" id="tab_des">
							<div class="form-group">
								<div class="col-sm-12">
									<textarea id="content" name="content"
										style="height: 300px;">
									</textarea>
								</div>
							</div>
						</div>
						<!-- 文章内容部分 结束-->
					</div>

					<div class="form-group text-center">
						<div class="col-sm-8 col-sm-offset-2">
							<button type="submit" class="btn btn-primary"><i class="fa fa-check"></i>提交</button>
							<div class="btn btn-danger" onclick="closeDow()"><i class="fa fa-remove"></i> 关闭</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	
	<div th:include="centre/manage/include::footer"></div>
	<script type="text/javascript" src="/js/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" src="/js/ueditor/ueditor.all.min.js"></script>
	<script type="text/javascript" src="/js/ueditor/lang/zh-cn/zh-cn.js"></script>
	<script type="text/javascript" src="/js/ueditor/custom.js?v=2"></script>
	<script type="text/javascript" src="/js/plugins/layui/layui.js"></script>
	<script type="text/javascript" src="/js/plugins/layer/layer.js"></script>
	<script type="text/javascript" src="/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="/js/appjs/sys/headLine/addHeadLinePage.js"></script>
	<script type="text/javascript">
		function closeDow() {
			var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
			parent.layer.close(index);
		}
	
		layui.use('laydate', function(){
			  var laydate = layui.laydate;
			  laydate.render({
			  	elem: '#timestart' , type: 'datetime'
			  });
			  
			  laydate.render({
			  	elem: '#timeend' , type: 'datetime'
			  });
			  
			  laydate.render({
				  elem: '#upStartTime' , type: 'datetime'
			  });
			  
			  laydate.render({
				elem: '#upEndTime' , type: 'datetime'
			  });
			  
		})
		
		$(function() {
			// tab切换
			$('#myTab a').click(function(e) {
				e.preventDefault();
				$('#myTab li').each(function() {
					$(this).removeClass('active')
				})
				$('.tab-content .tab-pane').each(function() {
					$(this).removeClass('active')
				})
				$(this).parent().addClass('active')
				id = $(this).attr('href')
				$(id).addClass('active');
			})
		})

		var ue = UE.getEditor('content');
		$('#content').data('editor', ue);
		$('#content').parents('form').submit(function() {
			if (ue.queryCommandState('source')) {
				ue.execCommand('source');
			}
		});
		UE.registerUI('uploadImage', function(editor, uiName){
			return new UE.ui.Button({
				name: '上传图片',
				title: '上传图片',
				cssRules:'background-position:-380px 0',
				onclick: function(){
					layer.open({
						id:'selectImgs',
						type : 2,
						title : '批量选择图片',
						maxmin : true,
						shadeClose : false,
						area : [ '60%', '70%' ],
						content : '/platform/config/batchUploadImgUeditor'  // iframe的url
					});
				}
			});
		});


		// function saveProduct() {
		// 	$.ajax({
		// 		url :'/product/data/save',
		// 		contentType : "application/json",
		// 		dataType : "json",
		// 		type : 'POST',
		// 		data:JSON.stringify(data),
		// 		success :function(result){
		// 			if (result.code == 0){
		// 				$("#productid").val(result.msg);
		// 				layer.alert("保存成功", {icon: 6});
		// 			} else {
		// 				if(result.msg!="" && result.msg!=null){
		// 					layer.alert( result.msg, {icon: 5});
		// 				}else{
		// 					layer.alert("保存失败，请联系管理员", {icon: 5});
		// 				}
		//
		// 			}
		// 		}
		// 	})
		// }

		function onSelectImgBtnClick(inputId, imgId) {
			layer.open({
				id:'selectImg',
				type : 2,
				title : '选择图片',
				maxmin : true,
				shadeClose : false,
				area : [ '60%', '70%' ],
				content : '/platform/config/selectImg/' + inputId +"/"+ imgId // iframe的url
			});
		}

		/**
		 * 加载图片URL
		 * @param inputId
		 * @param imgId
		 * @param url
		 */
		function loadImgUrl(inputId, imgId, url) {
			$('#'+inputId +'').val(url);
			$('#'+imgId +'').attr('src', url);
		}
		
		// 批量上传图片
		function selectImgs(domId) {
			layer.open({
				id:'selectImgs',
				type : 2,
				title : '批量选择图片',
				maxmin : true,
				shadeClose : false,
				area : [ '60%', '70%' ],
				content : '/platform/config/batchUploadImg/' + domId // iframe的url
			});
		}
		
		// ueditor 批量上传图片
		function selectImgsToUeditor() {
			layer.open({
				id:'selectImgsToUeditor',
				type : 2,
				title : '批量选择图片',
				maxmin : true,
				shadeClose : false,
				area : [ '60%', '70%' ],
				content : '/platform/config/batchUploadImg/' // iframe的url
			});
		}
		
		function loadImgsInfo(domId, result) {
			if (!result || result.length <1) {
				layer.msg(result.msg,{icon:7});
				return;
			}
			
			
			//editor.execCommand('inserthtml', `<img src=${url}>`);
			//editor.execCommand('inserthtml', `<img src=${url}>`);
			$('#' + domId).val(result.join(","));
			var imgHtml = '';
			for (var i=0;i<result.length;i++) {
				imgHtml += "<img style='max-width: 30%' src='"+result[i]+"'></img>";
			}
			$("#imgDiv").html(imgHtml);
		}
		
		// 加载图片进ueditor中
		function loadImgsToUeditor(result) {
			if (!result || result.length <1) {
				layer.msg(result.msg,{icon:7});
				return;
			}
			console.info(result);
			/* var imgUrlArray = result.split(","); */
			let editor = UE.getEditor('content');
			for (var i=0;i<result.length;i++) {
				console.info(i);
				var imgUrl = result[i];
				editor.execCommand('inserthtml', `<img src=${imgUrl}>`);
			}
		}
	</script>
	
</body>
</html>
